<template>
  <div>
    <div class="box1" ref="box1" @scroll="box1Scroll">
      <div class="smallBox1"></div>
    </div>
    <div class="box2" ref="box2" @scroll="box2Scroll">
      <div class="smallBox2"></div>
    </div>
  </div>
</template>

<script>
    export default {
        name: 'IviewAdminProPracticetip',

        data () {
            return {};
        },

        mounted () {},

        methods: {
            box1Scroll (event) {
                console.log('box1', event.target.scrollLeft);
                this.$refs.box2.scrollLeft = event.target.scrollLeft;
            },
            box2Scroll (event) {
                console.log('box2', event.target.scrollLeft);
                this.$refs.box1.scrollLeft = event.target.scrollLeft;
            }
        }
    };
</script>

<style lang="less" scoped>
.box1 {
  background: blue;
  width: 800px;
  height: 300px;
  overflow: scroll;
  .smallBox1 {
    width: 3000px;
    height: 200px;
    background-color: gray;
  }
}
.box2 {
  background: pink;
  width: 800px;
  height: 300px;
  overflow: scroll;
  .smallBox2 {
    width: 3000px;
    height: 200px;
    background-color: red;
  }
}
</style>
